import {useNavigate, useParams} from "react-router-dom";
import {Button, Card, message, Popconfirm, Spin, Tag, Tooltip} from "antd";
import {
    AlertOutlined,
    ArrowLeftOutlined,
    CheckCircleOutlined,
    ClockCircleOutlined,
    DeleteOutlined,
    EditOutlined,
    FileTextOutlined,
    HistoryOutlined,
    LockOutlined,
    MenuOutlined, ReadOutlined,
    SecurityScanOutlined,
    UserOutlined
} from "@ant-design/icons";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";
import {useEffect, useState} from "react";
import RoleBasicEdit from "../../../components/console/role/roleBasicEdit";
import RolePermissionAllocate from '../../../components/console/permission/RolePermissionAllocate'
import RolePageAllocate from "../../../components/console/permission/RolePageAllocate";

const ConsoleRoleDetail = () => {
    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const {operation, roleId} = useParams();

    // 角色详情（新增consolePages字段）
    const [roleDetail, setRoleDetail] = useState({
        roleName: "",
        roleDescription: "",
        permissions: [],
        consolePages: []
    });

    // 状态: 查询中
    const [loading, setLoading] = useState(true);

    // 编辑操作模态框打开标识
    const [editModalVisible, setEditModalVisible] = useState({
        editRoleBasic: false,
        editPermission: false,
        editPagePermission: false
    })

    // 返回角色管理页面
    const back2ConsoleRolePage = () => {
        navigate('/console/role');
    };

    // 删除角色
    const removeRoleById = () => {
        RequestUtils.post(RequestApis.roleManage.removeById, {id: roleId})
            .then(() => {
                messageApi.success("删除角色成功，即将返回角色管理页面")
                    .then(() => back2ConsoleRolePage());
            })
            .catch(err => messageApi.error(err.message));
    };

    // 获取角色详情
    const searchRoleById = () => {
        setLoading(true);
        RequestUtils.post(RequestApis.roleManage.searchById, {id: roleId})
            .then(res => {
                const data = res.data.data || {};
                setRoleDetail({
                    ...data,
                    permissions: (data.permissions || []).map(perm => ({
                        permissionCode: perm.permissionCode || '',
                        permissionName: perm.permissionName || '',
                        ...perm
                    })),
                    // 新增：处理控制台页面权限数据
                    consolePages: (data.consolePages || []).map(page => ({
                        pageCode: page.pageCode || '',
                        pageName: page.pageName || '',
                        module: page.module || '其他',
                        ...page
                    }))
                });
                setLoading(false);
            })
            .catch(err => {
                messageApi.error(err.message);
                setLoading(false);
            });
    };

    useEffect(() => {
        searchRoleById();
        // eslint-disable-next-line
    }, [roleId]);

    // 统计权限类型（原有：操作权限）
    const permissionStats = {
        total: roleDetail.permissions.length,
        write: roleDetail.permissions.filter(p => p.permissionCode.includes(':write:')).length,
        read: roleDetail.permissions.filter(p => !p.permissionCode.includes(':write:')).length
    };

    // 新增：统计页面权限类型
    const pageStats = {
        total: roleDetail.consolePages.length,
        modules: [...new Set(roleDetail.consolePages.map(page => page.module))].length // 模块数量
    };

    // 权限统计卡片样式（原有）
    const statCardStyles = [
        {
            bgColor: '#f0f9ff',
            borderColor: '#91d5ff',
            iconColor: '#1890ff'
        },
        {
            bgColor: '#f6ffed',
            borderColor: '#b7eb8f',
            iconColor: '#52c41a'
        },
        {
            bgColor: '#fff0f0',
            borderColor: '#ffccc7',
            iconColor: '#f5222d'
        }
    ];

    // 新增：页面权限统计卡片样式
    const pageStatCardStyles = [
        {
            bgColor: '#f0f7ff',
            borderColor: '#adc6ff',
            iconColor: '#40a9ff'
        },
        {
            bgColor: '#fff5f5',
            borderColor: '#ffccc7',
            iconColor: '#ff7a45'
        }
    ];

    // 获取权限类型样式（原有：操作权限）
    const getPermissionStyle = (permissionCode) => {
        const isWrite = permissionCode.includes(':write:');
        return {
            backgroundColor: isWrite ? 'rgba(82, 196, 26, 0.15)' : 'rgba(24, 144, 255, 0.15)',
            borderColor: isWrite ? '#52c41a' : '#1890ff',
            color: isWrite ? '#238636' : '#096dd9',
            hoverColor: isWrite ? 'rgba(82, 196, 26, 0.25)' : 'rgba(24, 144, 255, 0.25)'
        };
    };

    // 新增：获取页面权限标签样式
    const getPageStyle = (module, index) => {
        const moduleColors = [
            '#722ed1', '#eb2f96', '#13c2c2', '#faad14', '#1890ff', '#52c41a', '#f5222d'
        ];
        const color = moduleColors[index % moduleColors.length];
        return {
            backgroundColor: `${color}15`, // 15%透明度
            borderColor: color,
            color: color,
            hoverColor: `${color}25` // 25%透明度
        };
    };

    // 权限详情气泡内容（原有）
    const renderPermissionTooltip = (permission) => (
        <div style={{padding: '12px 16px'}}>
            <div style={{marginBottom: '8px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0'}}>
                <div style={{fontSize: '13px', color: '#a0a0a0', marginBottom: '4px'}}>权限编码</div>
                <div style={{fontSize: '14px', wordBreak: 'break-all'}}>{permission.permissionCode}</div>
            </div>
            <div style={{marginBottom: '8px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0'}}>
                <div style={{fontSize: '13px', color: '#a0a0a0', marginBottom: '4px'}}>权限名称</div>
                <div style={{fontSize: '14px'}}>{permission.permissionName}</div>
            </div>
            <div style={{marginBottom: '8px'}}>
                <div style={{fontSize: '13px', color: '#a0a0a0', marginBottom: '4px'}}>权限类型</div>
                <Tag
                    color={permission.permissionCode.includes(':write:') ? '#52c41a' : '#1890ff'}
                    style={{fontSize: '13px', borderRadius: '6px'}}
                >
                    {permission.permissionCode.includes(':write:') ? '写权限' : '读权限'}
                </Tag>
            </div>
        </div>
    );

    // 新增：页面权限详情气泡内容
    const renderPageTooltip = (page) => (
        <div style={{padding: '12px 16px', minWidth: '200px'}}>
            <div style={{marginBottom: '8px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0'}}>
                <div style={{fontSize: '13px', color: '#a0a0a0', marginBottom: '4px'}}>页面编码</div>
                <div style={{fontSize: '14px', wordBreak: 'break-all'}}>{page.pageCode}</div>
            </div>
            <div style={{marginBottom: '8px', paddingBottom: '8px', borderBottom: '1px solid #f0f0f0'}}>
                <div style={{fontSize: '13px', color: '#a0a0a0', marginBottom: '4px'}}>页面名称</div>
                <div style={{fontSize: '14px'}}>{page.pageName}</div>
            </div>
            <div>
                <div style={{fontSize: '13px', color: '#a0a0a0', marginBottom: '4px'}}>所属模块</div>
                <Tag
                    style={{fontSize: '13px', borderRadius: '6px'}}
                >
                    {page.module}
                </Tag>
            </div>
        </div>
    );

    // 按模块分组权限（原有：操作权限）
    const groupPermissionsByModule = () => {
        const groups = {};
        roleDetail.permissions.forEach(perm => {
            const module = perm.permissionCode.split(':')[0] || '其他';
            if (!groups[module]) {
                groups[module] = [];
            }
            groups[module].push(perm);
        });
        return groups;
    };

    // 新增：按模块分组页面权限
    const groupPagesByModule = () => {
        const groups = {};
        roleDetail.consolePages.forEach(page => {
            const module = page.module || '其他';
            if (!groups[module]) {
                groups[module] = [];
            }
            groups[module].push(page);
        });
        return groups;
    };

    const permissionGroups = groupPermissionsByModule();
    const pageGroups = groupPagesByModule(); // 新增：页面权限分组

    // 模块颜色列表（复用）
    const moduleColors = [
        '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#eb2f96', '#13c2c2'
    ];

    return (
        <div style={{padding: '24px', margin: '0 auto'}}>
            {contextHolder}
            <Spin spinning={loading} tip="加载中...">
                {/* 页面标题与操作区 */}
                <div style={{
                    marginBottom: '24px',
                    paddingBottom: '16px',
                    borderBottom: '1px solid #e5e7eb',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                    gap: '16px'
                }}>
                    <div style={{width: '100%', display: 'flex', justifyContent: 'space-between'}}>
                        <div>
                            <Button
                                type="primary"
                                onClick={back2ConsoleRolePage}
                                style={{
                                    borderRadius: '12px',
                                    padding: '6px 18px',
                                    backgroundColor: '#1890ff',
                                    borderColor: '#1890ff',
                                    transition: 'all 0.2s ease',
                                    width: '280px'
                                }}
                                hoverStyle={{
                                    backgroundColor: '#096dd9',
                                    borderColor: '#096dd9'
                                }}
                            >
                                <ArrowLeftOutlined style={{marginRight: '6px'}}/>
                                返回角色管理页面
                            </Button>
                        </div>

                        <div style={{display: 'flex', gap: '12px', flexWrap: 'wrap'}}>
                            {operation === "edit" && (
                                <>
                                    <Button
                                        color='purple'
                                        variant='solid'
                                        onClick={() => setEditModalVisible({
                                            ...editModalVisible,
                                            editRoleBasic: true
                                        })}
                                        style={{
                                            borderRadius: '12px',
                                            padding: '6px 18px',
                                            border: '1px solid #d9d9d9',
                                            transition: 'all 0.2s ease',
                                            width: '180px'
                                        }}
                                    >
                                        <EditOutlined style={{marginRight: '6px'}}/>
                                        编辑角色基本信息
                                    </Button>

                                    <Button
                                        color='pink'
                                        variant='outlined'
                                        onClick={() => setEditModalVisible({
                                            ...editModalVisible,
                                            editPermission: true
                                        })}
                                        style={{
                                            borderRadius: '12px',
                                            padding: '6px 18px',
                                            transition: 'all 0.2s ease',
                                            width: '160px'
                                        }}
                                    >
                                        <SecurityScanOutlined style={{marginRight: '6px'}}/>
                                        分配权限
                                    </Button>

                                    <Button
                                        color='cyan'
                                        variant='outlined'
                                        onClick={() => setEditModalVisible({
                                            ...editModalVisible,
                                            editPagePermission: true
                                        })}
                                        style={{
                                            borderRadius: '12px',
                                            padding: '6px 18px',
                                            transition: 'all 0.2s ease',
                                            width: '160px'
                                        }}
                                    >
                                        <ReadOutlined style={{marginRight: '6px'}}/>
                                        分配页面权限
                                    </Button>

                                    <Popconfirm
                                        placement="leftTop"
                                        title={"删除角色操作确认"}
                                        description={"确定要删除当前角色？角色被删除后将同时移除该角色与所有用户的关联，且数据不可恢复。"}
                                        okText="确认删除"
                                        cancelText="取消"
                                        onConfirm={removeRoleById}
                                    >
                                        <Button
                                            color="danger"
                                            variant="solid"
                                            icon={<DeleteOutlined style={{marginRight: '6px'}}/>}
                                            style={{
                                                borderRadius: '12px',
                                                padding: '6px 18px',
                                                transition: 'all 0.2s ease',
                                                backgroundColor: '#E83131',
                                                width: '200px'
                                            }}
                                        >
                                            <span>删除角色</span>
                                        </Button>
                                    </Popconfirm>
                                </>
                            )}
                        </div>
                    </div>
                </div>

                {/* 主要内容区 */}
                <div style={{display: 'flex', flexDirection: 'column', gap: '24px'}}>
                    {/* 角色基本信息卡片 */}
                    <Card style={{
                        borderRadius: '12px',
                        border: '1px solid #d1d5db',
                        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.05)',
                        overflow: 'hidden'
                    }}>
                        <div style={{padding: '20px'}}>
                            <div style={{display: 'flex', flexWrap: 'wrap', gap: '32px'}}>
                                {/* 角色信息左侧 */}
                                <div style={{flex: 1, minWidth: '300px'}}>
                                    <div style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: '16px',
                                        marginBottom: '20px'
                                    }}>
                                        <div style={{
                                            width: '64px',
                                            height: '64px',
                                            borderRadius: '12px',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            backgroundColor: '#e6f7ff',
                                            color: '#1890ff'
                                        }}>
                                            <LockOutlined style={{fontSize: '28px'}}/>
                                        </div>
                                        <div>
                                            <h3 style={{margin: 0, fontSize: '18px', color: '#1f2329'}}>
                                                {roleDetail.roleName || '未命名角色'}
                                            </h3>
                                            <div style={{marginTop: '4px', fontSize: '14px', color: '#667085'}}>
                                                创建于 {roleDetail.createdTime || '未知时间'}
                                            </div>
                                        </div>
                                    </div>

                                    <div style={{marginBottom: '16px'}}>
                                        <div style={{
                                            fontSize: '14px',
                                            color: '#4b5563',
                                            marginBottom: '8px',
                                            fontWeight: 500
                                        }}>
                                            角色描述
                                        </div>
                                        <div style={{
                                            padding: '12px',
                                            backgroundColor: '#f9fafb',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            color: '#374151',
                                            lineHeight: '1.6',
                                            border: '1px solid #f0f0f0'
                                        }}>
                                            {roleDetail.roleDescription || '该角色暂无描述信息'}
                                        </div>
                                    </div>

                                    {/* 角色状态标签（新增页面权限统计标签） */}
                                    <div style={{display: 'flex', gap: '12px', flexWrap: 'wrap'}}>
                                        <Tag color="green" icon={<CheckCircleOutlined/>} style={{
                                            fontSize: '12px',
                                            borderRadius: '6px',
                                            padding: '2px 8px'
                                        }}>
                                            状态正常
                                        </Tag>
                                        <Tag color="blue" style={{
                                            fontSize: '12px',
                                            borderRadius: '6px',
                                            padding: '2px 8px'
                                        }}>
                                            {permissionStats.total > 0 ? `${permissionStats.total} 项操作权限` : '无操作权限'}
                                        </Tag>
                                        <Tag color="purple" style={{
                                            fontSize: '12px',
                                            borderRadius: '6px',
                                            padding: '2px 8px'
                                        }}>
                                            {pageStats.total > 0 ? `${pageStats.total} 项页面权限` : '无页面权限'}
                                        </Tag>
                                    </div>
                                </div>

                                {/* 角色信息右侧：时间与操作人 */}
                                <div style={{flex: 1, minWidth: '300px'}}>
                                    <div style={{
                                        fontSize: '14px',
                                        color: '#4b5563',
                                        marginBottom: '12px',
                                        fontWeight: 500
                                    }}>
                                        角色记录
                                    </div>
                                    <div style={{
                                        display: 'flex',
                                        flexDirection: 'row',
                                        flexWrap: 'wrap',
                                        gap: '16px'
                                    }}>
                                        {[
                                            {
                                                icon: <ClockCircleOutlined/>,
                                                label: '创建时间',
                                                value: roleDetail.createdTime || '未知'
                                            },
                                            {
                                                icon: <UserOutlined/>,
                                                label: '创建人',
                                                value: roleDetail.createdByUserNickname || '系统'
                                            },
                                            {
                                                icon: <HistoryOutlined/>,
                                                label: '最后修改时间',
                                                value: roleDetail.lastModifiedTime || '未修改'
                                            },
                                            {
                                                icon: <EditOutlined/>,
                                                label: '最后修改人',
                                                value: roleDetail.lastModifiedByUserNickname || '未知'
                                            }
                                        ].map((item, index) => (
                                            <div key={index} style={{
                                                minWidth: 'calc(50% - 8px)',
                                                padding: '12px',
                                                backgroundColor: '#f9fafb',
                                                borderRadius: '8px',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                gap: '4px',
                                                border: '1px solid #f0f0f0'
                                            }}>
                                                <div style={{
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    fontSize: '13px',
                                                    color: '#667085'
                                                }}>
                                                    <span style={{
                                                        marginRight: '8px',
                                                        color: '#1890ff'
                                                    }}>{item.icon}</span>
                                                    {item.label}
                                                </div>
                                                <div style={{fontSize: '14px', color: '#1f2329', fontWeight: 500}}>
                                                    {item.value}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Card>

                    {/* 操作权限统计与列表（原有） */}
                    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
                        <div style={{
                            fontSize: '18px',
                            color: '#1f2329',
                            fontWeight: 500,
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px'
                        }}>
                            <SecurityScanOutlined style={{color: '#1890ff'}}/>
                            操作权限
                        </div>

                        {/* 权限统计卡片 */}
                        <div style={{
                            display: 'flex',
                            gap: '16px',
                            flexWrap: 'wrap'
                        }}>
                            <Card style={{
                                flex: 1,
                                minWidth: '200px',
                                borderRadius: '12px',
                                border: '1px solid ' + statCardStyles[0].borderColor,
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
                                backgroundColor: statCardStyles[0].bgColor,
                                padding: '12px 0'
                            }}>
                                <div style={{padding: '12px 16px'}}>
                                    <div style={{fontSize: '14px', color: '#667085', marginBottom: '6px'}}>
                                        总权限数
                                    </div>
                                    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                                        <span style={{fontSize: '22px', fontWeight: 600, color: '#1f2329'}}>
                                            {permissionStats.total}
                                        </span>
                                        <SecurityScanOutlined
                                            style={{fontSize: '18px', color: statCardStyles[0].iconColor}}/>
                                    </div>
                                </div>
                            </Card>

                            <Card style={{
                                flex: 1,
                                minWidth: '200px',
                                borderRadius: '12px',
                                border: '1px solid ' + statCardStyles[1].borderColor,
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
                                backgroundColor: statCardStyles[1].bgColor,
                                padding: '12px 0'
                            }}>
                                <div style={{padding: '12px 16px'}}>
                                    <div style={{fontSize: '14px', color: '#667085', marginBottom: '6px'}}>
                                        写权限数
                                    </div>
                                    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                                        <span style={{fontSize: '22px', fontWeight: 600, color: '#1f2329'}}>
                                            {permissionStats.write}
                                        </span>
                                        <CheckCircleOutlined
                                            style={{fontSize: '18px', color: statCardStyles[1].iconColor}}/>
                                    </div>
                                </div>
                            </Card>

                            <Card style={{
                                flex: 1,
                                minWidth: '200px',
                                borderRadius: '12px',
                                border: '1px solid ' + statCardStyles[2].borderColor,
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
                                backgroundColor: statCardStyles[2].bgColor,
                                padding: '12px 0'
                            }}>
                                <div style={{padding: '12px 16px'}}>
                                    <div style={{fontSize: '14px', color: '#667085', marginBottom: '6px'}}>
                                        读权限数
                                    </div>
                                    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                                        <span style={{fontSize: '22px', fontWeight: 600, color: '#1f2329'}}>
                                            {permissionStats.read}
                                        </span>
                                        <AlertOutlined style={{fontSize: '18px', color: statCardStyles[2].iconColor}}/>
                                    </div>
                                </div>
                            </Card>
                        </div>

                        {/* 权限列表卡片 */}
                        <Card style={{
                            borderRadius: '12px',
                            border: '1px solid #d1d5db',
                            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.05)'
                        }}>
                            <div style={{padding: '20px'}}>
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    marginBottom: '20px'
                                }}>
                                    <div style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: '8px',
                                        fontSize: '16px',
                                        color: '#1f2329',
                                        fontWeight: 500
                                    }}>
                                        <FileTextOutlined style={{color: '#1890ff'}}/>
                                        角色操作权限明细
                                    </div>
                                </div>

                                {roleDetail.permissions.length === 0 ? (
                                    <div style={{
                                        textAlign: 'center',
                                        padding: '40px 20px',
                                        backgroundColor: '#f9fafb',
                                        borderRadius: '8px',
                                        color: '#667085',
                                        fontSize: '14px',
                                        border: '1px dashed #e5e7eb'
                                    }}>
                                        <SecurityScanOutlined style={{
                                            fontSize: '48px',
                                            color: '#d1d5db',
                                            marginBottom: '16px',
                                            opacity: 0.5
                                        }}/>
                                        <div>该角色尚未分配任何操作权限</div>
                                        {operation === "edit" && (
                                            <Button
                                                type="primary"
                                                size="small"
                                                style={{
                                                    marginTop: '16px',
                                                    borderRadius: '8px'
                                                }}
                                                onClick={() => setEditModalVisible({
                                                    ...editModalVisible,
                                                    editPermission: true
                                                })}
                                            >
                                                立即分配权限
                                            </Button>
                                        )}
                                    </div>
                                ) : (
                                    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
                                        {Object.entries(permissionGroups).map(([module, perms], index) => (
                                            <div key={index}>
                                                <div style={{
                                                    fontSize: '14px',
                                                    color: '#4b5563',
                                                    marginBottom: '12px',
                                                    fontWeight: 500,
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    gap: '8px'
                                                }}>
                                                    <span style={{
                                                        width: '6px',
                                                        height: '6px',
                                                        borderRadius: '50%',
                                                        backgroundColor: moduleColors[index % moduleColors.length]
                                                    }}/>
                                                    {module} 模块
                                                    <Tag size="small" style={{
                                                        marginLeft: '8px',
                                                        borderRadius: '6px',
                                                        padding: '1px 6px',
                                                        backgroundColor: `${moduleColors[index % moduleColors.length]}20`,
                                                        color: moduleColors[index % moduleColors.length],
                                                        borderColor: moduleColors[index % moduleColors.length]
                                                    }}>
                                                        {perms.length} 项
                                                    </Tag>
                                                </div>

                                                <div style={{
                                                    display: 'flex',
                                                    flexWrap: 'wrap',
                                                    gap: '10px',
                                                    padding: '12px',
                                                    backgroundColor: '#f9fafb',
                                                    borderRadius: '8px',
                                                    border: '1px solid #f0f0f0'
                                                }}>
                                                    {perms.map((permission, pIndex) => {
                                                        const style = getPermissionStyle(permission.permissionCode);
                                                        return (
                                                            <Tooltip
                                                                key={pIndex}
                                                                placement="top"
                                                                title={renderPermissionTooltip(permission)}
                                                                mouseEnterDelay={0.1}
                                                                overlayStyle={{
                                                                    borderRadius: '8px',
                                                                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
                                                                    border: '1px solid #f0f0f0'
                                                                }}
                                                            >
                                                                <div
                                                                    style={{
                                                                        padding: '6px 12px',
                                                                        borderRadius: '6px',
                                                                        border: `1px solid ${style.borderColor}`,
                                                                        backgroundColor: style.backgroundColor,
                                                                        color: style.color,
                                                                        fontSize: '13px',
                                                                        cursor: 'pointer',
                                                                        transition: 'all 0.2s ease'
                                                                    }}
                                                                    onMouseEnter={(e) => {
                                                                        e.target.style.transform = 'translateY(-1px)';
                                                                        e.target.style.backgroundColor = style.hoverColor;
                                                                    }}
                                                                    onMouseLeave={(e) => {
                                                                        e.target.style.transform = 'translateY(0)';
                                                                        e.target.style.backgroundColor = style.backgroundColor;
                                                                    }}
                                                                >
                                                                    {permission.permissionName}
                                                                </div>
                                                            </Tooltip>
                                                        );
                                                    })}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </Card>
                    </div>

                    {/* 新增：页面权限统计与列表 */}
                    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
                        <div style={{
                            fontSize: '18px',
                            color: '#1f2329',
                            fontWeight: 500,
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px'
                        }}>
                            <MenuOutlined style={{color: '#722ed1'}}/> {/* 页面权限专用图标 */}
                            控制台页面权限
                        </div>

                        {/* 页面权限统计卡片 */}
                        <div style={{
                            display: 'flex',
                            gap: '16px',
                            flexWrap: 'wrap'
                        }}>
                            <Card style={{
                                flex: 1,
                                minWidth: '200px',
                                borderRadius: '12px',
                                border: '1px solid ' + pageStatCardStyles[0].borderColor,
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
                                backgroundColor: pageStatCardStyles[0].bgColor,
                                padding: '12px 0'
                            }}>
                                <div style={{padding: '12px 16px'}}>
                                    <div style={{fontSize: '14px', color: '#667085', marginBottom: '6px'}}>
                                        总页面数
                                    </div>
                                    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                                        <span style={{fontSize: '22px', fontWeight: 600, color: '#1f2329'}}>
                                            {pageStats.total}
                                        </span>
                                        <MenuOutlined
                                            style={{fontSize: '18px', color: pageStatCardStyles[0].iconColor}}/>
                                    </div>
                                </div>
                            </Card>

                            <Card style={{
                                flex: 1,
                                minWidth: '200px',
                                borderRadius: '12px',
                                border: '1px solid ' + pageStatCardStyles[1].borderColor,
                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
                                backgroundColor: pageStatCardStyles[1].bgColor,
                                padding: '12px 0'
                            }}>
                                <div style={{padding: '12px 16px'}}>
                                    <div style={{fontSize: '14px', color: '#667085', marginBottom: '6px'}}>
                                        涉及模块数
                                    </div>
                                    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                                        <span style={{fontSize: '22px', fontWeight: 600, color: '#1f2329'}}>
                                            {pageStats.modules}
                                        </span>
                                        <FileTextOutlined
                                            style={{fontSize: '18px', color: pageStatCardStyles[1].iconColor}}/>
                                    </div>
                                </div>
                            </Card>
                        </div>

                        {/* 页面权限列表卡片 */}
                        <Card style={{
                            borderRadius: '12px',
                            border: '1px solid #d1d5db',
                            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.05)'
                        }}>
                            <div style={{padding: '20px'}}>
                                <div style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    marginBottom: '20px'
                                }}>
                                    <div style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: '8px',
                                        fontSize: '16px',
                                        color: '#1f2329',
                                        fontWeight: 500
                                    }}>
                                        <MenuOutlined style={{color: '#722ed1'}}/>
                                        角色页面权限明细
                                    </div>
                                </div>

                                {roleDetail.consolePages.length === 0 ? (
                                    <div style={{
                                        textAlign: 'center',
                                        padding: '40px 20px',
                                        backgroundColor: '#f9fafb',
                                        borderRadius: '8px',
                                        color: '#667085',
                                        fontSize: '14px',
                                        border: '1px dashed #e5e7eb'
                                    }}>
                                        <MenuOutlined style={{
                                            fontSize: '48px',
                                            color: '#d1d5db',
                                            marginBottom: '16px',
                                            opacity: 0.5
                                        }}/>
                                        <div>该角色尚未分配任何页面权限</div>
                                    </div>
                                ) : (
                                    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
                                        {Object.entries(pageGroups).map(([module, pages], index) => (
                                            <div key={index}>
                                                <div style={{
                                                    fontSize: '14px',
                                                    color: '#4b5563',
                                                    marginBottom: '12px',
                                                    fontWeight: 500,
                                                    display: 'flex',
                                                    alignItems: 'center',
                                                    gap: '8px'
                                                }}>
                                                    <span style={{
                                                        width: '6px',
                                                        height: '6px',
                                                        borderRadius: '50%',
                                                        backgroundColor: moduleColors[index % moduleColors.length]
                                                    }}/>
                                                    {module} 模块
                                                    <Tag size="small" style={{
                                                        marginLeft: '8px',
                                                        borderRadius: '6px',
                                                        padding: '1px 6px',
                                                        backgroundColor: `${moduleColors[index % moduleColors.length]}20`,
                                                        color: moduleColors[index % moduleColors.length],
                                                        borderColor: moduleColors[index % moduleColors.length]
                                                    }}>
                                                        {pages.length} 个页面
                                                    </Tag>
                                                </div>

                                                <div style={{
                                                    display: 'flex',
                                                    flexWrap: 'wrap',
                                                    gap: '10px',
                                                    padding: '12px',
                                                    backgroundColor: '#f9fafb',
                                                    borderRadius: '8px',
                                                    border: '1px solid #f0f0f0'
                                                }}>
                                                    {pages.map((page, pIndex) => {
                                                        const style = getPageStyle(page.module, index);
                                                        return (
                                                            <Tooltip
                                                                key={pIndex}
                                                                placement="top"
                                                                title={renderPageTooltip(page)}
                                                                mouseEnterDelay={0.1}
                                                                overlayStyle={{
                                                                    borderRadius: '8px',
                                                                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
                                                                    border: '1px solid #f0f0f0'
                                                                }}
                                                            >
                                                                <div
                                                                    style={{
                                                                        padding: '6px 12px',
                                                                        borderRadius: '6px',
                                                                        border: `1px solid ${style.borderColor}`,
                                                                        backgroundColor: style.backgroundColor,
                                                                        color: style.color,
                                                                        fontSize: '13px',
                                                                        cursor: 'pointer',
                                                                        transition: 'all 0.2s ease',
                                                                        display: 'flex',
                                                                        alignItems: 'center',
                                                                        gap: '6px'
                                                                    }}
                                                                    onMouseEnter={(e) => {
                                                                        e.target.style.transform = 'translateY(-1px)';
                                                                        e.target.style.backgroundColor = style.hoverColor;
                                                                    }}
                                                                    onMouseLeave={(e) => {
                                                                        e.target.style.transform = 'translateY(0)';
                                                                        e.target.style.backgroundColor = style.backgroundColor;
                                                                    }}
                                                                >
                                                                    <MenuOutlined style={{fontSize: '12px'}}/>
                                                                    <span>{page.pageName}</span>
                                                                </div>
                                                            </Tooltip>
                                                        );
                                                    })}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </Card>
                    </div>
                </div>
            </Spin>

            {/* 编辑角色基本信息模态框 */}
            <RoleBasicEdit
                messageApi={messageApi}
                editModalVisible={editModalVisible}
                setEditModalVisible={setEditModalVisible}
                roleId={roleId}
                roleName={roleDetail.roleName}
                roleDescription={roleDetail.roleDescription}
                permissionCodes={roleDetail.permissions.map(permission => permission.permissionCode)}
                consolePageCodes={roleDetail.consolePages.map(page => page.pageCode)}
                searchRoleById={searchRoleById}
            />

            {/* 分配角色权限模态框 */}
            <RolePermissionAllocate
                messageApi={messageApi}
                editModalVisible={editModalVisible}
                setEditModalVisible={setEditModalVisible}
                roleId={roleId}
                existPermissions={roleDetail.permissions}
                searchRoleById={searchRoleById}
            />

            {/* 分配页面权限模态框 */}
            <RolePageAllocate
                messageApi={messageApi}
                editModalVisible={editModalVisible}
                setEditModalVisible={setEditModalVisible}
                roleId={roleId}
                existConsolePages={roleDetail.consolePages}
                searchRoleById={searchRoleById}
            />

        </div>
    );
};

export default ConsoleRoleDetail;